import { useState } from 'react'
import Card from '../ui/Card/Card'
import LogItem from './logitem/LogItem'

import './Logs.css'
import LogFilter from './logFilter/LogFilter'
const Logs = (props) => {

    const [year, setYear] = useState(2022)

    const filterLogs = props.logs.filter(item => item.date.getFullYear() === year)

    const logsData = filterLogs.map((item) =>
        <LogItem key={item.id}
            date={item.date}
            desc={item.desc}
            time={item.time}
            delLog={() => {
                props.delLogById(item.id)
            }} />)

    const changeYearHandler = (year)=>{
        setYear(year)
    }

    return <Card className='logs'>
        <LogFilter year={year} onChangeYear={changeYearHandler} />
        {logsData.length === 0 && <div className='no-log'>没有找到日志</div>}
        {logsData}
    </Card>
}

export default Logs